<template>
    <div 
      class="note-card"
      :style="{ backgroundColor: note.color }"
    >
      <div class="note-header">
        <ColorPicker :selected-color="note.color" @color-change="updateColor" />
        
        <div class="note-actions">
          <button class="action-btn" @click.stop="addNoteAfter">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 4V20M4 12H20" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
            </svg>
          </button>
          <button class="action-btn" @click.stop="deleteNote">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </button>
        </div>
      </div>
      <!-- <div class="textarea-wrapper">
        
      </div> -->
      <textarea
        v-model="content"
        placeholder="输入便签内容..."
        @input="handleContentChange"
        ref="textarea"
      ></textarea>
      
      <!-- <div class="note-footer">
        <div class="tag-badge" v-if="note.tagId && getTagName(note.tagId)">
          {{ getTagName(note.tagId) }}
        </div>
        <div class="timestamp">
          {{ formatDate(note.createTime) }}
        </div>
      </div> -->
    </div>
  </template>
  
  <script setup>
  import { ref, watch, nextTick, onMounted } from 'vue'
  import { useNoteStore } from '../stores/noteStore'
  import ColorPicker from './ColorPicker.vue'
  
  const props = defineProps({
    note: {
      type: Object,
      required: true
    }
  })
  
  const emit = defineEmits(['update:note', 'delete'])
  
  const store = useNoteStore()
  const content = ref(props.note.content)
  const textarea = ref(null)
  
  // 自动调整textarea高度
  function adjustTextareaHeight() {
    if (textarea.value) {
      textarea.value.style.height = 'auto'
      textarea.value.style.height = `${Math.min(textarea.value.scrollHeight, 300)}px`
    }
  }
  
  onMounted(() => {
    adjustTextareaHeight()
  })
  
  watch(() => props.note.content, (newVal) => {
    content.value = newVal
    nextTick(adjustTextareaHeight)
  })
  
  function handleContentChange() {
    adjustTextareaHeight()
    emit('update:note', { ...props.note, content: content.value })
  }
  
  function updateColor(newColor) {
    emit('update:note', { ...props.note, color: newColor })
  }
  
  function addNoteAfter() {
    store.addNote(props.note.tagId, props.note.id)
  }
  
  function deleteNote() {
    emit('delete', props.note.id)
  }
  
  function getTagName(tagId) {
    const tag = store.tags.find(t => t.id === tagId)
    return tag ? tag.name : ''
  }
  
  function formatDate(isoString) {
    const date = new Date(isoString)
    return date.toLocaleDateString('zh-CN', {
      month: 'short',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit'
    })
  }
  </script>
  
  <style lang="scss" scoped>
@import '../styles/_variables.scss';
@import '../styles/_mixins.scss';

.note-card {
  display: flex;
  flex-direction: column;
  height: 400px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: all 0.2s ease;
  
  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
  }
}

.note-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.note-actions {
  display: flex;
  gap: 0.5rem;
}

.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(0, 0, 0, 0.03);
  border: none;
  border-radius: 4px;
  color: rgba(0, 0, 0, 0.6);
  cursor: pointer;
  transition: all 0.15s ease;
  
  &:hover {
    background: rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.8);
  }
  
  svg {
    width: 16px;
    height: 16px;
  }
}

.textarea-wrapper {
  flex: 1;
  padding: 0.5rem 1rem;
  display: flex;
  overflow: auto;
  
  // Win11风格的滚动条
  &::-webkit-scrollbar {
    width: 8px;
  }
  
  &::-webkit-scrollbar-track {
    background: transparent;
  }
  
  &::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: padding-box;
  }
  
  &::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.3);
  }
}

textarea {
  flex: 1;
  width: calc(100% - 1rem);
  padding: 0 0.5rem;
  box-sizing: border-box;
  margin: 0.5rem 0.5rem 1rem 0.5rem;
  border: none;
  background: transparent;
  resize: none;
  font-family: 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.8);
  
  // Win11风格的滚动条
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px
}
  
  &::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, .05);
    border-radius: 3px
  }
  
  &::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    // border: 2px solid transparent;
    // background-clip: padding-box;
  }
  
  &::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.3);
  }
  
  &:focus {
    outline: none;
  }
  
  &::placeholder {
    color: rgba(0, 0, 0, 0.4);
    font-weight: 300;
  }
}

.note-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 0.8125rem;
  color: rgba(0, 0, 0, 0.6);
  background-color: rgba(0, 0, 0, 0.01);
}

.tag-badge {
  padding: 0.25rem 0.75rem;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  font-weight: 500;
}

.timestamp {
  opacity: 0.8;
  font-weight: 400;
}
</style>